<script>
  import List from '../components/list.svelte';
  import Btn from '../components/btn.svelte';
  import QueryBar from '../components/queryBar.svelte';
  import Paging from '../components/paging.svelte';
  import {onMount} from 'svelte';
  import {Post} from '../lib/net.js';
  import {Orders, OrderSell, AgentList,SearchAgent} from '../api.js';
  import {CoinType, OrderType, OrderState,} from '../conf.js';
  import Query from '../model/query.js';
  import {IsAdmin} from '../lib/token.js';
  import moment from 'moment';

  let info = {
    total: 0,
    many: 0,
    many_promise: 0,
    less: 0,
    down_promise: 0,
    users: 0,
    up: 0,
    down: 0,
    income: 0,
  }
  let objCointype = {
    0: 'btc',
    1: 'eth',
    2: 'eos',
    3: 'etc',
    4: 'ltc',
    5: 'bch',
    6: 'xrp',
    7: 'bsv',
    8: 'dash',
    9: 'ht'
  }

  let _e;

  let data = {
    title: ["UID", "姓名", "手机号","邮箱", "代理人", "币种","方向",  "杠杆","开仓张数", "止盈", "止损", "风险率", "开仓价格", "盈亏", "手续费", "开仓时间", "状态"],
    data: []
  }
// ,"币种"
  var query = new Query();

  // 0 持仓 1 委托 2 平仓

  onMount(async () => {
    getList();
  });

  async function getList(e) {
    if (e) {
        _e = e;
      query.start = e.detail.start
      query.end = e.detail.end
      if (e.detail.types !== 1) {
                let ret = await Post(SearchAgent, {
                    type: e.detail.types,
                    condition: query.condition,
                });
                query.condition = "";
                query.admin = ret
                if(query.admin == -100) return
      } else {
        query.admin = null
      }
    }
    let ret = await Post(Orders + "/1", query)
    info.total = ret.total;
    info.many = ret.Extra.many;
    info.many_promise = ret.Extra.many_promise;
    info.less = ret.Extra.down;
    info.income = ret.Extra.income;
    info.down_promise = ret.Extra.down_promise;
    info.up = ret.Extra.incomeUp;
    info.down = ret.Extra.down;
    info.users = ret.Extra.users;
    query.total = ret.total;
    query.page = ret.page;
    let _data = [];
    for (let item of ret.list) {
      if (!item.order.high) {
        item.order.high=0.00
      }
      if (!item.order.low) {
        item.order.low=0.00
      }
      if (!item.order.profit_perc) {
        item.order.profit_perc=0
      }
      item.order.profit_perc += "%"
      let arr = [
        item.order.uid,
        item.user_info.name,
        item.user.phone,
        item.user.email,
        item.user.inviteCode || "",
        objCointype[item.order.coin_type],
        OrderType[item.order.buy_type],
        item.order.multiple + "X",
        item.order.count,
        item.order.high,
        item.order.low,
        item.order.profit_perc,
        item.order.open,
        (item.order.signed ? "+" : "-") + item.order.income,
				"-" + item.order.fee,
        item.order.show_open_date,
        IsAdmin() ? `<button class="button is-success is-small" data-id="${item.id}" on:click>平仓</button>` : ""
      ];
      arr.href = "/user/contract/detail?tid=" + item.order.tid;
      arr.handler = sell;
      arr.id = item.order.tid;
      _data.push(arr);
    }
    data.data = _data;
  }

  async function sell() {
    event.stopPropagation();

    if (!confirm("确定要平仓？")) return
    let id = this.getAttribute("data-id");

    await Post(OrderSell, {id});

    setTimeout(getList, 2000)
  }

  function setPage(page) {
    query.page = page;
    getList();
  }

  function refresh(){
    getList(_e);
  }

</script>

<div class="view">
		<div style="display: flex;flex-direction: row;align-items: center;width: 99%;margin: 5px;height: 60px;background-color: white;margin-top: 5px"
				 class="borderRadius4">
        <span style="color: #20222A;margin: 20px">
            当前持仓
        </span>
		</div>
		<!--//-->
		<div class="borderRadius4 containerHold">
				<div class="columns rowReverse">
						<div class="column is-4">
								<!--//-->
								<div class="rowNumCenter">
										<span class="left1">看多单数：</span>
										<span class="mid1" style="color:forestgreen">{info.many}</span>
										<span class="left1">单</span>
								</div>
								<!--//-->
								<div class="rowNumCenter">
										<span class="left1">占用保证金：</span>
										<span class="mid1" style="color:forestgreen">{info.many_promise}</span>
										<span class="left1">USDT</span>
								</div>
								<!--//-->
								<div class="rowNumCenter">
										<span class="left1">看空单数：</span>
										<span class="mid1" style="color:forestgreen">{info.down}</span>
										<span class="left1">单</span>
								</div>
								<!--//-->
								<div class="rowNumCenter">
										<span class="left1">占用保证金：</span>
										<span class="mid1" style="color:forestgreen">{info.down_promise}</span>
										<span class="left1">USDT</span>
								</div>
								<!--//-->
								<div class="rowNumCenter">
										<span class="left1">浮动盈亏：</span>
										<span class="mid1" style="color:forestgreen">{info.income}</span>
										<span class="left1">USDT</span>
								</div>
						</div>
				</div>
		</div>
		<!--//-->
		<div class="containerHold">
				<QueryBar query={query} on:message={getList}/>
		</div>
        <div class="containerHold">
            <button class="button is-info is-small" on:click={refresh}>刷新</button>
        </div>
		<div class="containerHold" style="width: 100%;overflow-x: auto;margin-top: -10px">
				<List class="button" data={data} handler={sell}/>
		</div>
		<div class="containerHold rowReverse">
				{#if query.total !== 0}
				<Paging page={query} handler={setPage}/>
						{/if}
		</div>
</div>

<style>
		.borderRadius4 {
				border-radius: 4px;
		}

		.containerHold {
				width: 98%;
				margin: 20px 1%;
		}

		.info {
				background: #fff;
		}

		.is-success {
				background-color: #FF2D2D !important;
				color: white !important;
		}
		.rowNumCenter{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				font-size: 14px;
		}
</style>
